import groupBy from 'lodash/groupBy';

// 组件通用属性
const commonAttrs = {
  display: true,
  disabled: false,
  required: false,
  span: 8,
  labelCol: 8,
  wrapperCol: 16,
};

export const itemTypes = {
  block: 'block', // 块状类型，只能放在树节点的第一级，不接收画布中的子元素。适用于提交表单时，需要回填值的**自定义组件**
  staticBlock: 'staticBlock', // 与块状类型的唯一区别是，不需要回填值。适用于纯展示的**自定义组件**
  bowl: 'bowl', // 容器类型
  food: 'food', // 可被容器接收的基础类型
};

export const componentTypes = [
  {
    type: itemTypes.bowl,
    icon: 'icon-card',
    label: 'Card布局',
    componentType: 'Card',
  },
  {
    type: itemTypes.staticBlock,
    icon: 'icon-text',
    label: '静态文本',
    componentType: 'StaticText',
    ...commonAttrs,
  },
  {
    type: itemTypes.staticBlock,
    icon: 'icon-buttonGroup',
    label: '按钮组',
    componentType: 'ButtonGroup',
    ...commonAttrs,
  },
  // {
  //   type: itemTypes.block,
  //   icon: 'icon-input',
  //   label: '步骤条',
  //   componentType: 'Steps',
  //   ...commonAttrs,
  // },
  {
    type: itemTypes.block,
    icon: 'icon-input',
    label: '异步组件',
    componentType: 'Async',
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-input',
    label: '单行文本',
    componentType: 'Input',
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-textarea',
    label: '多行文本',
    componentType: 'TextArea',
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-numberPicker',
    label: '数字输入',
    componentType: 'NumberPicker',
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-numberPicker',
    label: '评分',
    componentType: 'Rating',
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-select',
    label: '下拉框',
    componentType: 'Select',
    dataSource: [
      { label: '选项一', value: '1' },
      { label: '选项二', value: '2' },
      { label: '选项三', value: '3' },
    ],
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-radio',
    label: '单选框',
    componentType: 'RadioGroup',
    dataSource: [
      { label: '选项一', value: '1' },
      { label: '选项二', value: '2' },
      { label: '选项三', value: '3' },
    ],
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-checkbox',
    label: '复选框',
    componentType: 'CheckboxGroup',
    dataSource: [
      { label: '选项一', value: '1' },
      { label: '选项二', value: '2' },
      { label: '选项三', value: '3' },
    ],
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-switcher',
    label: '开关',
    componentType: 'Switch',
    ...commonAttrs,
  },
  // {
  //   type: itemTypes.food,
  //   icon: 'icon-input-search',
  //   label: '下列表格',
  //   componentType: 'ComboGrid',
  //   ...commonAttrs,
  // },
  {
    type: itemTypes.food,
    icon: 'icon-comboModal',
    label: '查询弹窗',
    componentType: 'ComboModal',
    placeholder: '请选择',
    tableProps: {
      multiple: true,
    },
    modalProps: {
      title: '弹窗标题',
      width: 300,
    },
    ...commonAttrs,
  },
  // {
  //   type: itemTypes.food,
  //   icon: 'icon-input-search',
  //   label: '树选择',
  //   componentType: 'TreeSelect',
  //   ...commonAttrs,
  // },
  {
    type: itemTypes.food,
    icon: 'icon-date-picker',
    label: '起止时间',
    componentType: 'RangePicker',
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-date-picker',
    label: '年月日',
    componentType: 'DatePicker',
    ...commonAttrs,
  },
  // {
  //   type: itemTypes.food,
  //   icon: 'icon-year-picker',
  //   label: '年',
  //   componentType: 'YearPicker',
  //   ...commonAttrs,
  // },
  {
    type: itemTypes.food,
    icon: 'icon-month-picker',
    label: '月',
    componentType: 'MonthPicker',
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-week-picker',
    label: '周',
    componentType: 'WeekPicker',
    ...commonAttrs,
  },
  {
    type: itemTypes.food,
    icon: 'icon-file-upload',
    label: '附件上传',
    componentType: 'SlickUpload',
    uploadProps: {
      listType: 'text',
      size: 10,
      length: 9,
    },
    ...commonAttrs,
  },
];

const { bowl = [], food = [], block = [], staticBlock = [] } = groupBy(componentTypes, 'type');

export const bowlTypes = bowl;
export const foodTypes = food;
export const blockTypes = block;
export const staticBlockTypes = staticBlock;
